<template>
    <el-container>
      <div class="right-panel">
        <div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
          <div class="panel-search-box" style="width: 200px">
            <span class="demonstration" style="margin-left: 10px">片区:</span>
            <el-select v-model="search.area" placeholder="全国" style="width: 150px" filterable clearable
              @change="areaChange">
              <el-option v-for="item in areaList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <div class="panel-search-box" style="width: 260px">
            <span class="demonstration" style="margin-left: 10px">品种:</span>
            <el-select v-model="search.productSpec" placeholder="全部" style="width: 210px" filterable clearable
              @change="specChange">
              <el-option v-for="(item, index) in productSpecList" :key="index" :label="item.name"
                :value="item.name"></el-option>
            </el-select>
          </div>
          <div class="panel-search-box">
            <span class="demonstration" style="margin: 0 10px">计划月份:</span>
            <el-date-picker v-model="planCode" type="month" disabled style="width: 150px"></el-date-picker>
          </div>
          <div class="panel-search-box">
            <el-button type="primary" style="width: 100px; margin-left: 10px" @click="upsearch">查询</el-button>
            <el-button type="primary" :disabled="adjustDisabled" style="margin-left: 10px"
              @click="inveDistribution">本月供货数</el-button>
            <el-button type="primary" :disabled="adjustDisabled" style="margin-left: 10px"
              @click="saleDistribution">特殊调整</el-button>
             
          </div>
          <el-popover placement='left' :width="300" trigger="hover">
            <p>分货原则：</p>
            <p>1、主要原则:库存周转</p>
            <p>（举例分配1月配额）计算公式：</p>
            <p>
              12月渠道库存 + 1月配额 -
              1月预计纯销=1月底渠道库存（平均纯销*统一库存周转）
              当供货>需求，统一库存周转为常规品种周转管理要求，比如2个月或者2.5个月；
              当供货>需求，根据供货倒推出各片区保持统一的库存周转；
            </p>
            <p>2、其他原则：增长率、规模占比</p>
            <p>
              特殊情况下考虑的原则，主要应用于感冒灵等较大规模品种，按照供货情况，将一部分货源按照片区的增长率和规模占比分配；
            </p>
  
  
            <template #reference>
              <el-icon color="#f5a21d" style="margin-left: 100px; vertical-align: middle; font-size: 24px">
                <QuestionFilled />
              </el-icon>
            </template>
          </el-popover>
        </div>
        <div class="search-box">
          <div class="panel-search-box" style="margin-bottom: 10px">
            <scFileImport ref="scFileImport" :apiObj="importApi" :maxSize="30" hideButton @success="handleImportSuccess">
            </scFileImport>
          </div>
        </div>
      </div>
      <el-header style="display: none"></el-header>
      <el-main class="nopadding">
        <scTable ref="table" :apiObj="apiObj" :params="params" border :pageSize="24" stripe remoteSort remoteFilter
          @dataChange="dataChange">
          <el-table-column label="品种" prop="productSpec" align="center"></el-table-column>
          <el-table-column label="区域" prop="area" align="center"></el-table-column>
          <el-table-column :label="`${planCurMonth}月配额数量`" prop="planNextQuotaNum" align="center"></el-table-column>
          <el-table-column :label="`${planCurMonth}月配额（万）`" prop="planNextQuota" align="center"></el-table-column>
          <el-table-column :label="`预计${planLastMonth}月底库存（万）`" prop="planThisMonthStock"
            align="center"></el-table-column>
          <el-table-column :label="`预计${planCurMonth}月纯销（万）`" prop="planNextSale" align="center"></el-table-column>
          <el-table-column :label="`预计${planCurMonth}月底库存（万）`" prop="planNextMonthStock" align="center"></el-table-column>
          <el-table-column :label="`预计${planCurMonth}月底库存周转`" prop="turnoverString" align="center"></el-table-column>
        </scTable>
      </el-main>
    </el-container>
  </template>
  
  <script>
  export default {
    name: 'plan',
    data() {
      return {
        dialog: {
          info: false
        },
        areaList: [], //片区列表
        productSpecList: [], //品种列表
        search: {
          area: '', //片区
          productSpec: '' //品种
        },
        apiObj: this.$API.plan.getPlan2,
        params: {
          area: '', //片区
          productSpec: '', //品种
          type:1
        },
        planCode: '', //计划年月
        planLastMonth: '', //计划年月-上月月份
        planCurMonth: '', //计划年月-当月月份
        importApi: this.$API.plan.importOtxStockTurnover,
        adjustDisabled: false //禁止分货
      }
    },
    created() {
      this.getArea()
      this.getProductSpec()
    },
    methods: {
      areaChange(value) {
        if (!value) {
          this.search.area = ''
          this.upsearch()
        } else {
          let obj = this.areaList.find((item) => item === value)
          this.search.area = obj
        }
      },
      specChange(value) {
        if (!value) {
          this.search.productSpec = ''
          this.upsearch()
        }
      },
      //获取片区列表
      async getArea() {
        let res = await this.$API.plan.areas2.get()
        res.data.forEach((item) => {
            this.areaList.push(item)
        })
      },
      //获取品种列表
      async getProductSpec() {
        let res = await this.$API.plan.productList2.get()
        this.productSpecList = res.data
      },
      dataChange(data) {
        if (data.code == 0 && data.data.length > 0) {
          this.planCode = data.data[0].planCode.toString()
          let month = this.planCode.substring(4)
          this.planLastMonth = Number(month) - 1 == 0 ? 12 : Number(month) - 1
          this.planCurMonth = Number(month)
          this.adjustDisabled = false
        } else {
          this.adjustDisabled = true
        }
      },
      //按库存周转分货
      inveDistribution() {
        this.$refs.scFileImport.open()
      },
      //按纯销规模分货
      saleDistribution() {
        this.$router.push('/specialized/plan/adjustment')
      },
      // 导入成功后
      handleImportSuccess(res, close) {
        this.$message.success('文件上传成功，配额已刷新！')
        close()
        this.$refs.table.upData()
      },
      //查询
      upsearch() {
        this.$refs.table.upData(this.search)
      }
    }
  }
  </script>
  
  <style>
  .header-btn-item {
    display: flex;
  }
  </style>
  